<script setup>
	import {inject, onMounted, ref, shallowRef} from "vue";
	import { getCouncilPage } from '@/api/council.js'
	import emitter from "@/utils/mitt.js";
	const getAssetsFile = inject("getAssetsFile")
	
	const props = defineProps({
		// 是否独立展示
		showAlone: {
			type: Boolean,
			default: true
		}
	})
	
	const expertList = ref([])
	const total = ref(0)
	const pages = ref(0)
	const queryParams = ref({
		pageSize: 16,
		pageNum: 1
	})
	
	const getExpertList = async () => {
		const res = await getCouncilPage({...queryParams.value, isView: 1})
		if(res.data.code === 200) {
			expertList.value = res.data.data.records
			total.value = res.data.data.total;
			pages.value = res.data.data.pages;
		}
	}
	
	const changePath = (path, query = null) => {
		emitter.emit('changePath', {
			path: path,
			query: query
		})
	}

	onMounted(()=>{
		getExpertList()
	})
</script>

<template>
	<div :class="props.showAlone ? 'pageContent' : null">
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>专家委员会</div>
			</n-h6>
			<n-button
				v-if="!props.showAlone"
				text
				:color="'#999'"
				@click="changePath('/index/expert/expertList')"
			>
				查看更多>>
			</n-button>
		</n-space>
		<n-divider class="pageDivider"></n-divider>
		<n-grid :cols="3" :x-gap="30" :y-gap="40" style="margin-bottom: 20px">
			<n-gi :span="1" v-for="item in expertList">
				<n-card
					hoverable
					header-style="padding: 0;"
					content-style="padding: 0;"
					style="cursor: pointer;"
					@click="changePath('/index/expert/expertDetail', {id: item.id})">
					<div class="expert-list-card flex">
						<n-image
							v-if="item?.photoFiles[0]?.accessUrl"
							class="card-img"
							:src=" item?.photoFiles[0]?.accessUrl"
							object-fit="contain"
							preview-disabled
							width="125"
						/>
						<n-image
							v-else
							class="card-img placeholder"
							:src="getAssetsFile('img/content/empty.png')"
							object-fit="contain"
							preview-disabled
							width="125"
						/>
						<div style="flex-grow: 1; padding: 20px">
							<div style="font-weight: bold; font-size: 20px; margin-bottom: 16px">
								{{ item.name }}
							</div>
							<n-ellipsis :tooltip="false" style="color: #666666" :line-clamp="4">
								{{ item.desc }}
							</n-ellipsis>
						</div>
					</div>
				</n-card>
			</n-gi>
		</n-grid>
		<n-space justify="center" v-if="showAlone">
			<n-pagination
				show-quick-jumper
				:page-count="pages"
				v-model:page-size="queryParams.pageSize"
				v-model:page="queryParams.pageNum"
				:onUpdate:page="getExpertList">
				<template #prefix>共{{ total }}条</template>
				<template #suffix>页</template>
			</n-pagination>
		</n-space>
	</div>
</template>

<style scoped>
	.expert-list-card {
		height: 180px;
	}
	.card-img{
		width: 125px;
		height: 100%;
	}
	.card-img.placeholder{
		background-color: #f2f2f2;
	}
</style>
